import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,

} from 'antd';
import request from '../../../utils/request';
import { useNavigate } from 'react-router-dom';


const { TextArea } = Input;


const Add = () => {

    const [form] = Form.useForm()
    const navigate = useNavigate()
    // 添加用户的功能
    const submit = async (values) => {
        const { data } = await request.post('user/reg', values)
        console.log(data);
        if (data.status === 200) {
            navigate('/manage/user/list')
        }
    }

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                form={form}
                onFinish={submit}
            >
                <Form.Item
                    label="用户名"
                    name='username'

                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>


                <Form.Item
                    label="密码"
                    name='password'
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item label="昵称">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="真实姓名">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item
                    name={['user', 'email']}
                    label="Email"
                    rules={[
                        {
                            type: 'email',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="Upload" valuePropName="fileList">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>

                <Form.Item label="用户类型" >
                    <Radio.Group>
                        <Radio value="普通用户"> 普通用户 </Radio>
                        <Radio value="学生"> 学生 </Radio>
                        <Radio value="管理员"> 管理员 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>添加用户</Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default Add;